import { defineComponent, reactive } from 'vue'

import Scroll from '@/components/Scroll'
import VlogListItem from '@/components/VlogListItem'
import { useStore } from '@/store'
import { sleep, randomStr } from '@/utils'

interface IRowItem {
  id: string
  title: string
}

interface IState {
  list: IRowItem[]
  page: number
}

const apiGetList = (page = 1): IRowItem[] =>
  Array(10)
    .fill(0)
    .map((v, i) => ({ id: randomStr() + page, title: `item ${i}` }))

export default defineComponent({
  name: 'Recommend',
  setup() {
    const { layout } = useStore()
    const state: IState = reactive({ list: [], page: 1 })

    const pullDownToGetList = async () => {
      await sleep(2000)
      state.list = apiGetList()
    }

    const reachBottomToGetMore = async () => {
      await sleep(2000)
      state.list.push(...apiGetList())
    }

    return () => (
      <>
        <Scroll
          onPullingDown={pullDownToGetList}
          onReachBottom={reachBottomToGetMore}
          height={`${window.innerHeight - layout.state.headerHeight - layout.state.footerHeight}px`}
        >
          <div>
            {state.list.map((v) => (
              <VlogListItem key={v.id} data={v} />
            ))}
          </div>
        </Scroll>
      </>
    )
  },
})
